<template>
    <div>
        <div class="block">
            <el-timeline>
                <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                        :timestamp="activity.timestamp"
                        placement="top"
                >
                    <el-card shadow="hover">
                        <h3>{{activity.content}}</h3>
                    </el-card>

                </el-timeline-item>
            </el-timeline>
        </div>
        <el-button plain @click="open2" v-show="false"></el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activities: [
                    {
                        content: '某人发帖子：“各位JR，我想做一个程序猿，请问有什么要注意的……”某猿：“等我下班跟你细说……然后……就没有然后了。',
                        timestamp: '程序猿迷之下班时间',
                        size: 'large',
                        type: 'primary',
                        icon: 'el-icon-more'
                    },
                    {
                        content: '老婆给当程序员的老公打电话：“下班顺路买一斤包子带回来，如果看到卖西瓜的，买一个。当晚，程序员老公手捧一个包子进了家门……',
                        timestamp: '程序猿的脑回路',
                        color: '#0bbd87'
                    }, {
                        content: '“搞IT太辛苦了，想换一行怎么办？”“敲一下Enter键。”',
                        timestamp: '二十多年没有对象怎么办！new()出来',
                        size: 'large'
                    }, {
                        content: '佛祖说，他可以满足程序猿一个愿望。程序猿许愿有生之年写出一个没有bug的程序，然后他得到了永生。',
                        timestamp: '佛祖也救不了你'
                    }, {
                        content: '一女同学在食堂吃饭时，一程序猿凑到旁边，“同学，我能和你说话不，我已经一个月没和女生说话了。',
                        timestamp: '程序猿孤独的日子,程序媛在哪里！',
                        size: 'large'
                    },
                    {
                        content: '程序员的读书历程：x语言入门 —> x语言应用实践 —> x语言高阶编程 —> x语言的科学与艺术 —>编程之美 —>编程之道 —>编程之禅—>颈椎病康复指南。',
                        timestamp: '防脱发的去哪了',
                        size: 'large'
                    }
                ]
            }
        },
        methods: {
            open2() {
                this.$notify({
                    title: '开发者：张祉昊',
                    message: '指导老师:周湛樟',
                    position: 'bottom-right'
                });
            }
        },
        created() {
            this.open2()
        }
    }
</script>

<style lang="scss" scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
